import React, { useState, useRef, useEffect } from 'react'
import ParkingMap from './ParkingMap'
import GuideEditor from './GuideEditor'
import DataVisualization from './DataVisualization'

export default function Park() {
  const [parkingSlots, setParkingSlots] = useState([
    { id: 'A1', x: 50, y: 50, occupied: false, type: 'standard' },
    { id: 'A2', x: 150, y: 50, occupied: true, type: 'disabled' },
  ])

  const [guides, setGuides] = useState([])
  const [selectedSlot, setSelectedSlot] = useState(null)

  const handleAddGuide = (newGuide) => {
    setGuides([
      ...guides,
      {
        ...newGuide,
        id: `guide_${Date.now()}`,
        timestamp: new Date().toISOString(),
      },
    ])
  }

  return (
    <div className="system-container">
      <ParkingMap
        slots={parkingSlots}
        guides={guides}
        onSelectSlot={setSelectedSlot}
      />
      <GuideEditor selectedSlot={selectedSlot} onAddGuide={handleAddGuide} />
      <DataVisualization slots={parkingSlots} guides={guides} />
    </div>
  )
}
